var banner = document.querySelector("#banner")
var timer = null
banner.onmouseenter = function() {
	//停止自动切换
	clearInterval(timer)
}
banner.onmouseleave = function() {
	//重新激活自动切换
	timer = setInterval(toggleContent, 1000)
}
//初始化自动切换
timer = setInterval(toggleContent, 1000)

function toggleContent() {
	var bannerlist = document.querySelector("#banner-content")
	bannerlist.insertBefore(bannerlist.lastElementChild, bannerlist.firstElementChild)
	//icon操作
	var actEle = document.querySelector(".banner-icons .act")
	if (actEle.previousElementSibling) {
		actEle.previousElementSibling.classList.add("act")
	} else {
		document.querySelector(".banner-icons").lastElementChild.classList.add("act")
	}
	actEle.classList.remove("act")
}
// 点击事件
var icons = document.querySelector('.banner-icons')
icons.onclick = function(e) {
	// 没有被激活的Li标签
	if (e.target.tagName == 'LI' && (!e.target.classList.contains('act'))) {
		// icon对应修改
		document.querySelector('.banner-icons .act').classList.remove('act')
		e.target.classList.add('act')
		// 激活对应内容区
		// 如果content里data-for和target里data-id相同					
		var conEles = document.querySelectorAll('#banner-content li')
		// 如果内容是最后一个,在倒数第二个前面插入
		var lastSecond =
			document.querySelector('#banner-content').lastElementChild.previousElementSibling
		var lastEle = document.querySelector('#banner-content').lastElementChild
		if (lastEle.dataset.for == e.target.dataset.id) {
			var bannerList = document.querySelector('#banner-content')
			bannerList.insertBefore(
				lastEle, lastSecond)
			return
		}
		// 否则在最后一个前面插入
		for (var i = 0; i < conEles.length; i++) {
			if (conEles[i].dataset.for == e.target.dataset.id) {
				// content要放到内容中间
				var bannerList = document.querySelector('#banner-content')
				bannerList.insertBefore(
					conEles[i], lastEle)
				break;
			}
		}

	}
}
